<template>
  <div class="bar-chart-container">
    <div class="chart-header">
      <h3>教育层次分布</h3>
      <el-radio-group v-model="viewType" size="small">
        <el-radio-button label="count">数量</el-radio-button>
        <el-radio-button label="percent">占比</el-radio-button>
      </el-radio-group>
    </div>
    <CommonChart :options="chartOptions" height="calc(100% - 40px)" />
  </div>
</template>

<script setup lang="ts">
import { ref, computed } from "vue"
import { CommonChart } from "./index"
import type { EChartsOption } from "echarts"

const viewType = ref("count")

const chartOptions = computed<EChartsOption>(() => ({
  tooltip: {
    trigger: "axis",
    axisPointer: {
      type: "shadow"
    }
  },
  grid: {
    top: "0%",
    left: "3%",
    right: "4%",
    bottom: "3%",
    containLabel: true
  },
  xAxis: {
    type: "value",
    boundaryGap: [0, 0.01]
  },
  yAxis: {
    type: "category",
    data: ["专科", "本科", "硕士", "博士"]
  },
  series: [
    {
      name: "数量",
      type: "bar",
      data: [1890, 2350, 1280, 580],
      itemStyle: {
        color: {
          type: "linear",
          x: 0,
          y: 0,
          x2: 1,
          y2: 0,
          colorStops: [
            { offset: 0, color: "#83bff6" },
            { offset: 0.5, color: "#188df0" },
            { offset: 1, color: "#188df0" }
          ]
        }
      }
    }
  ]
}))
</script>

<style lang="scss" scoped>
.bar-chart-container {
  height: 100%;
  display: flex;
  flex-direction: column;

  .chart-header {
    @include flex-between;
    margin-bottom: 10px;

    h3 {
      font-size: 16px;
      font-weight: normal;
    }
  }
}
.chart-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 40px;
}
</style>
